<template>
  <div>
    <h2>树</h2>
    <el-tree 
      :data="data" 
      :props="{label:'name', children: 'list'}" 
      @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '张大大',
            list: [
              {
                name: '小亮',
                list: [
                  {
                    name: '小丽',
                  },
                  {
                    name: '大光'
                  }
                ]
              },
              {
                name: '小美',
                list: [
                  {
                    name: '小高',
                  }
                ]
              }
            ]
          }
        ]
      };
    },
    methods: {
      // 共三个参数，
       // 依次为：
       //   - 传递给 data 属性的数组中该节点所对应的对象
       //   - 节点对应的 Node
       //   - 节点组件本身
      handleNodeClick(data, node, tree) {
        console.log(data,node, tree);
      }
    }
  };
</script>